<style lang="less" scoped>
h4 {
  margin-left: 1em;
  margin-top: 0.8em;
}
.contents {
  li {
    img {
      width: 100%;
    }
  }
}

.tip {
  font-size: 0.9em;
}
.btns {
  margin-top: 1em;
  margin-bottom: 2em;
  .btn {
    margin-right: 4em;
  }
}
.btn-capture {
  margin-top: 1em;
  width: 8em;
  height: 8em;
  border-radius: 50%;
  background-color: #008cba;
  color: white;
}
.capture-tip {
  margin-top: 1.5em;
  font-size: 1.5em;
  font-style: oblique;
  background-image: linear-gradient(
    to right,
    red,
    orange,
    yellow,
    green,
    yellow,
    orange,
    red,
    orange,
    yellow,
    green,
    yellow,
    orange,
    red
  );
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 200% 100%;
  animation: MySignature-animation 5s infinite linear;
}
@keyframes MySignature-animation {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -100% 0;
  }
}
:focus {
  outline: 0;
}
</style>
<template>
  <div>
    <h4>{{chapter.title}}</h4>
    <ul class="contents" v-if="contents.length>0">
      <li v-for="(x,i) of contents" :key="i">
        <img :src="x.img_url" alt>
      </li>
      <div class="tip ub uc">当前章节：{{chapter.title}}</div>
    </ul>
    <ul v-else class="pad">
      <li>目前处于测试阶段，尚未抓取</li>
      <li class="ub uc" v-if="!doing">
        <button class="btn btn-capture" @click="onCaptureClick">开始抓取</button>
      </li>
      <li class="ub uc capture-tip" v-else>正在抓取，请稍候...</li>
    </ul>

    <div class="btns ub uc">
      <nuxt-link to="/" class="btn">回到目录</nuxt-link>
      <nuxt-link :to="'/chapters/'+next.cid" class="btn">下一章</nuxt-link>
    </div>
  </div>
</template>
<script>
function trim(s) {
  return s.replace(/(^\s*)|(\s*$)/g, "");
}

let topic_code = "dpcq";
export default {
  async asyncData({ params, app }) {
    let { id } = params;
    let { data } = await app.$api.get(
      `/topics/${topic_code}/chapters/${id}/contents`
    );
    let chapter = data.itemMap.chapter;
    let next = data.itemMap.next;
    let contents = data.items;
    return { chapter, next, contents, app };
  },
  data() {
    return {
      doing: false
    };
  },
  mounted() {
    window.localStorage.curChapter=JSON.stringify(this.chapter)
  },
  methods: {
    async onCaptureClick() {
      console.log("start capture");
      this.doing = true;
      let { data } = await this.app.$api.get(
        `/topics/${this.chapter.topic}/chapters/${this.chapter.cid}/capture`
      );
      this.doing = false;
      console.log("data", data);
      this.contents = data.items;
    }
  }
};
</script>
